<template>
  <div class="commentBox">
    <h2>评论内容</h2>
    <hr>
    <textarea placeholder="请输入评论内容" v-model="msg"></textarea>
    <mt-button type="primary" size="large" @click="postcomment">添加评论</mt-button>
    <div v-for="(item,index) in list" :key="index">
      <div class="username">第 {{index+ 1}} 楼 &nbsp;&nbsp; {{item.user_name}} </div>
      <div class="content">{{item.content}}</div>
    </div>
   
    <mt-button type="danger" plain size="large" @click="add">加载更多</mt-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      index: 1,
      list: [],
      msg: ""
    };
  },
  props: ["id"],
  methods: {
    getList() {
      this.$http
        .get("api/getcomments/" + this.id + "?pageindex=" + this.index)
        .then(res => {
          this.list = this.list.concat(res.body.message);
        });
    },
    add() {
      this.index += 1;
      this.getList();
    },
    postcomment() {
      this.$http
        .post("api/postcomment/" + this.id, { content: this.msg })
        .then(res => {
          console.log(res.body.message);

          this.list.unshift({
            add_time: new Date(),
            content: this.msg,
            user_name: "hyc"
          });
          this.msg = "";
        });
    }
  },
  created() {
    this.getList();
  }
};
</script>
<style lang="scss" scoped>
.commentBox {
  h2 {
    font-size: 18px;
  }
  hr {
    margin: 5px 0;
    color: #000;
  }
  textarea {
    font-size: 14px;
    margin: 5px 0;
  }
  .username {
    background-color: #ccc;
    line-height: 30px;
  }
  .mint-button {
    margin-bottom: 3px;
  }
  .content {
    line-height: 30px;
    text-indent: 1em;
  }
}
</style>